import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { formGroupDefaultProps } from './defaultProps';
import type { FormGroupOptions } from './type';
import numberToWord from '../_util/numberToWord';

export interface FormGroupProps extends FormGroupOptions, HTMLAttributes<HTMLDivElement> {}

const FormGroup: FC<FormGroupProps> = (props) => {
  const { className, inline, equal, widths, children, forwardedRef, ...formGroupProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames({ inline }, { equal, width: equal }, numberToWord(widths), 'fields', className),
      ...formGroupProps,
    },
    children,
  );
};

FormGroup.displayName = 'FormGroup';
FormGroup.defaultProps = formGroupDefaultProps;

export default FormGroup;
